<template>
  <el-form :rules="rules" class="login-container">
    <h3 class="login-title">系统登陆</h3>
    <el-form-item prop="auname">
      <el-input type="text" placeholder="请输入账号" v-model="loginFrom.uname"></el-input>
    </el-form-item>
    <el-form-item prop="mypwd">
      <el-input type="password" placeholder="请输入登录密码" v-model="loginFrom.pwd"></el-input>
    </el-form-item>
    <el-checkbox class="login-rem" v-model="check">记住密码</el-checkbox>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <el-lable class="login-wang">忘记密码</el-lable>
    <el-form-item>
      <el-button type="primary" style="width:100%;" @click="$event => mySub()">登&nbsp;&nbsp;录</el-button>
    </el-form-item>
  </el-form>
</template>
  
<script>

export default {
  name: "Login",
  data() {
    return {
      rules: {
        auname: [
          { required: true, message: "请输入账号信息", trigger: 'blur' }
        ],
        mypwd: [
          { required: true, message: "密码不能为空", trigger: 'blur' }
        ],
      },
      loginFrom: {
        uname: "",
        pwd: ""
      },
      check: true
    }
  },
  methods: {
    mySub(loginFrom) {
      console.log(loginFrom);
      // this.$ref[loginFrom].validate((valid) => {
      //   if (valid) {
      //     alert("你已经进入系统");
      //   } else {
      //     alert("信息不正确，请重新输入!")
      //   }
      // });
      this.$router.push('/home')
    }
  }
}

</script>
  
<style scoped>
.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.login-title {
  margin: Opx auto 40px auto;
  text-align: center;
  color: #505458;
}

.login-rem {
  margin: Opx 0px 35px Opx;
  text-align: left;
}

.login-wang {
  margin: 15px 0px 35px 0px;
  text-align: left;
  font-size: small;
}
</style>
  